<!--促销活动-->
<template>
	<view class="page-container" v-if="themeData">
		<up-navbar
			safeAreaInsetTop
			fixed
			:bgColor="navbarcfg.bgColor"
			@left-click="pageBack"
			:title="navbarcfg.title"
		></up-navbar>
		<view class="safe-area-inset-bottom">
			<view v-for="(item, index) in themeData.image_hotspots" :key="index" class="image-container">
				<image :src="item.image_url" mode="widthFix" class="image"></image>
				<view
					v-for="(hotspot, hIndex) in item.hotspots"
					:key="hIndex"
					:style="{
						position: 'absolute',
						top: `${hotspot.top}px`,
						left: `${hotspot.left}px`,
						width: `${hotspot.width}px`,
						height: `${hotspot.height}px`,
						cursor: 'pointer',
						backgroundColor: 'rgba(0, 0, 0, 0.1)',
						zIndex: 2,
					}"
					@click="jumpLinkTo(hotspot.link)"
				></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onPageScroll, onShareAppMessage, onShareTimeline, onShow } from "@dcloudio/uni-app"
import { $getThemeDetail } from "@/api/home"
import { jumpLinkTo, pageBack } from "@/utils/page-redirect"
import { getIdBYScene } from "@/utils/tools"
import immersiveNavbar from "@/mixins/immersive-navbar"

const themeId = ref("")
const themeData = ref(null)
const getThemeDetail = () => {
	$getThemeDetail(themeId.value).then((res: any) => {
		themeData.value = res

		let windowWidth = uni.getSystemInfoSync().windowWidth
		//这里除以450是因为后台的图片的容器定宽450
		let ratio = windowWidth / 450
		for (const item of themeData.value.image_hotspots) {
			for (let hotspot of item.hotspots) {
				hotspot.top = hotspot.top_left_y_coord * ratio
				hotspot.left = hotspot.top_left_x_coord * ratio
				hotspot.width = (hotspot.bottom_right_x_coord - hotspot.top_left_x_coord) * ratio
				hotspot.height = (hotspot.bottom_right_y_coord - hotspot.top_left_y_coord) * ratio
			}
		}
	})
}

onShow(() => {
	if (!themeId.value) {
		uni.showModal({
			title: "提示",
			content: "未获取到活动ID",
		})
		return
	}
	getThemeDetail()
})
onLoad((option: any) => {
	let { id } = option
	if (option.scene) {
		let scene = decodeURIComponent(option.scene)
		id = getIdBYScene(scene)
	}
	themeId.value = id
})

// 滚动位置
let { navbarcfg, pageTitle, pageScroll } = immersiveNavbar()
onPageScroll((e: any) => {
	let scrollTop = e.scrollTop
	pageScroll(scrollTop)
	pageTitle.value = themeData.value.name
})
// 分享给好友
onShareAppMessage(() => {
	return {
		title: "分享活动",
		path: `/pages/feed/theme/index?id=${themeId.value}`,
	}
})
// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: "分享活动",
		imageUrl: `${themeData.value.cover_url}`,
	}
})
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.image-container {
	position: relative;
	overflow: hidden;

	.image {
		width: 100%;
		outline-width: 0px;
		vertical-align: top;
	}
}
</style>
